{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Article</title>
    <!-- 引入 echarts.js -->
    <script src="{% static '/js/echarts.js' %}"></script>
    <script src="{% static '/js/jquery-3.6.0.min.js' %}"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
        $.ajax({
            type: "get",
            url: "/echart",
            success: function(data){
                  // 基于准备好的dom，初始化echarts实例
                 var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '职业类型',
            },

            series: [{
                name: '职业类型',
                type: 'pie',
                selectedMode:'single',
                radius: ['50%','70%'],
                data: data.count,
               clockwise:false,
               data:{{name_data|safe}}
           } ]
        };


        // 使用刚指定的配置项和数据显示图表。
     option && myChart.setOption(option);
   }
});


</script>
</body>
</html>